articles

Home / DeveloperSection / Articles / Basic Code to use Sencha ExtJs.

Ask Question

Basic Code to use Sencha ExtJs.

Abhishek Srivasatava4552 23-Nov-2016

Sencha ExtJS is an advanced version of JavaScript. Now the days, it is one of the most valuable language in terms of a web application as it is helpful in designing because of its vast predefined properties of panel tab etc. 


Here is the code related to Sencha ExtJS. If you want to create panels inside panel, then this code may be helpful: 

Basic Code to use Sencha ExtJs.


Here is the code for above output: 

    <!DOCTYPEhtml>
    <html>
    <head>
       <linkhref="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"rel="stylesheet"/>
       <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
       <scripttype="text/javascript">
           Ext.onReady(function () {
               Ext.create('Ext.panel.Panel', { // Creating Panel
                   renderTo: 'div2', 
                   height: 585, 
                   width: 1360 ,
                   layout: 'border',
                       items: [{ // Creating Panel inside Panel
                       title: 'West Panel',
                       region: 'west',
                       html: 'West Side of the Panel',
                       collapsible: true,
                       split: true,
                       width: 300,
                       layout : 'accordion',
                       bodyStyle: 'padding:15px',
                       items: [{ // Creating Panel inside Panel
                           title: 'Panel 1',
                           html: 'Panel 1 html content'
                       }, {
                           title: 'Panel 2',
                           html: 'Panel 2 html content'
                       }, {
                           title: 'Panel 3',
                           html: 'Panel 3 html content'
                       }]
                      
                   }, {
                       title: 'south Panel',
                       region: 'south',
                       html: 'South Side of the Panel',
                       collapsible: true,
                       split: true,
                       bodyStyle: 'padding:15px'
 
                   }, {
                       title: 'East Panel',
                       region: 'east',
                       html: 'East Side of the Panel',
                       collapsible: true,
                       split: true,
                       bodyStyle: 'padding:15px'
 
                   }]
               });
           });
 

 

If we want to create a menu bar then this code may be helpful:

Basic Code to use Sencha ExtJs.

Here is code for the above output:


 

           Ext.onReady(function () {
               var SamplePanel = Ext.extend(Ext.Panel, { // Creating Panel to for Menu bar 
                   width: 1365,
                   height: 60,
                   hidden: false,
                   renderTo: 'div1',
                   scrollable: true
               })
 
              
               new SamplePanel({ // Defining Panel to for Menu bar 
                   title: 'Implementation Testing',
 
                   tbar: [{ // Creating top view for the menu bar 
                       iconCls: 'add16', // Assigning view property to the test1 
                       text: ‘test1’,
                       menu: [ // Creating items under 1 menu bar.
                               {
                                   
                                   text: "Register",
                                   closable: false,
                                   listeners: {
                                       click: function () { // Action which we need to proceed after clicking on menu item
                       Registwin.show();
                                       }
                                   }
                               },
                                   {
                                     
                                       text: "login",
                                       closable: false,
                                       listeners: {
                                           click: function () {
                                               loginwin.show();
                                           }
                                       }
                                   }
                               ]
 
                   },
                    {
                        iconCls: 'add16',
                        text: ‘test2’,
                        menu: [
                              {
                                 
                                  text: "Register",
                                  closable: false,
                                  listeners: {
                                      click: function () {
                                          Registwin.show();
                                      }
                                  }
                              },
                                  {
                                     
                                      text: "login",
                                      closable: false,
                                      listeners: {
                                          click: function () {
                                              loginwin.show();
                                          }
                                      }
                                  }
                        ]
 
                    },
                      {
                          iconCls: 'add16',
                          text: ‘test3’,
                          menu: [
                              {
                                 
                                  text: "Register",
                                  closable: false,
                                  listeners: {
                                      click: function () {
                                          Registwin.show();
                                      }
                                  }
                              },
                                  {
                                     
                                      text: "login",
                                      closable: false,
                                      listeners: {
                                          click: function () {
                                              loginwin.show();
                                          }
                                      }
                                  }
                          ]
                      },
                       {
                           iconCls: 'add16',
                           text: ‘test4’,
                           menu: [
                              {
                                
                                  text: "Register",
                                  closable: false,
                                  listeners: {
                                      click: function () {
                                          Registwin.show();
                                      }
                                  }
                              },
                                  {
                                     
                                      text: "login",
                                      closable: false,
                                      listeners: {
                                          click: function () {
                                              loginwin.show();
                                          }
                                      }
                                  }
                           ]
                       },
                        {
                            iconCls: 'add16',
                            text: ‘test5’,
                            menu: [
                              {
                                 
                                  text: "Register",
                                  closable: false,
                                  listeners: {
                                      click: function () {
                                          Registwin.show();
                                      }
                                  }
                              },
                                  {
                                   
                                      text: "login",
                                      closable: false,
                                      listeners: {
                                          click: function () {
                                              loginwin.show();
                                          }
                                      }
                                  }
                            ]
                        },
                        {
                                iconCls: 'add16',
                                text: ‘test6’,
                                menu: [
                                  {
                                    
                                      text: "Register",
                                      closable: true,
                                      listeners: {
                                          click: function () {
                                              Registwin.show();
                                          }
                                      }
                                  },
                                      {
                                          
                                          text: "login",
                                          closable: false,
                                          listeners: {
                                              click: function () {
                                                  loginwin.show();
                                              }
                                          }
                                      }
                                ]
                        }, 
                        {
                            xtype: 'button',
                            text: 'Register',
                            listeners: {
                                click: function () {
                                  
                                    Registwin.show();
                                }
                             }
                            
                        }, {
                            xtype: 'button',
                            text: 'Login',
                            listeners: {
                               
                                click: function () {
                                   
                                    loginwin.show();
                                }
                            }
                        }
                   ],
                   lbar: [
                   ],
                   rbar: [
                   ],
                   bbar: [
 
                   ]
               })
          
           });
 
 


If we want to create a window form with validation, then this code may be


helpful:

Basic Code to use Sencha ExtJs.


Here is the code for above output:


    Ext.onReady(function () {
                   Registwin = new Ext.Window({ // Creating login window 
                       xtype: 'UserForm',
                       modal: true,
                       closeAction: 'close',
                       layout: 'fit',
                       height: 300,
                       width: 400,
                       title: 'Register',
                       items: [
                           {
                               xtype: 'form',
                               bodyPadding: 5,
                               items: [
                                   {
                                       xtype: 'fieldset',
                                       title: 'Fill The Details',
 
                                       defaults: {
                                           xtype: 'textfield',
                                           labelWidth: 100,
                                           maxLength: 10,
                                           enforceMaxLength: true,
                                           width: 300
 
                                       },
                                       items: [
 {
                                               labelSeparator: '', // It is used to add fieldLabel and textbox
                                               fieldLabel: 'Name',
                                               name: 'Name', 
                                               maxLength: 10, // It will show error after 10 digit
                                               enforceMaxLength: true, // Used so that user cannot enter the value whose text length is greater than 10.
                                               allowBlank: false, // Putting validation so that this fieldwill be manadatory.
                                               msgTarget: 'under' // Place Where we need to error message. 
 
                                           },
                                           {
                                               fieldLabel: 'Email',
                                               labelSeparator: '',
                                               name: 'UserEmail',
                                               maxLength: 20, 
                                               vtype :'email',  // Putting validation so that input will be email type only.
                                               enforceMaxLength: true,
                                               allowBlank: false,
                                               msgTarget: 'under'
                                           },
                                           {
                                               fieldLabel: 'Phone',
                                               name: 'PhoneNumber',
                                               labelSeparator: '',
                                               maskRe: /[0-9]/, //Textbox will accept only 0-9character
                                               maxLength: 10,
                                               enforceMaxLength: true,
                                               allowBlank: false,
                                               msgTarget: 'under'
 
                                           },
                                           {
                                               labelSeparator: '',
                                               fieldLabel: 'Address',
                                               name: 'Address',
                                               maxLength: 10,
                                               enforceMaxLength: true,
                                               allowBlank: false,
                                               msgTarget: 'under'
                                           },   
                                           {
                                               xtype: 'datefield',
                                               fieldLabel: 'Date of birth',
                                               name: 'DOB',
                                               labelSeparator: '',
                                               format: 'd/m/Y', // Putting validation for user input must be date month and year.
                                              maxLength: 10,
                                               enforceMaxLength: true,
                                               allowBlank: false,
                                               msgTarget: 'under'
                                           },
                                           {
                                               fieldLabel: 'Password',
                                               name: 'Password',
                                               id: 'pass1',
                                               labelSeparator: '',
                                               inputType: 'password', //User input will be hidden,show only *
                                               maxLength: 10,
                                               enforceMaxLength: true,
                                               allowBlank: false,
                                               msgTarget: 'Under'
                                           }
 
                                       ]
                                   }
                               ],
                               buttons: [
                                   {
                                       text: 'Save',
                                       action: 'saveUser', //Above validation is used to show error message but we need to put validation on button otherwise after clicking on button wrong data will be processded successfully. We need to show error message after clicking on click button. So below is the code to check all form validation.
                                       listeners: {
                                           click: function (button) {
         var form = button.up('form');
                                               if (form.isValid()) {
                                                   Ext.Msg.alert('Succcess', 'Thanks For Register !')
                                               }
                                               else
                                               {
                                                   Ext.Msg.alert('Error', 'Please fill valid data !')
                                                }
                                               } } } ]

          

Here is the complete code to use all the above concept in the program.



 
    <!DOCTYPEhtml>
    <html>
    <head>
       <linkhref="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"rel="stylesheet"/>
       <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
       <scripttype="text/javascript">
           Ext.onReady(function () {
               Ext.create('Ext.panel.Panel', {
                   renderTo: 'div2',
                   height: 585,
                   width: 1360 ,
                   layout: 'border',
                   defaults: {
                   },
                   
                   items: [{
                       title: 'West Panel',
                       region: 'west',
                       html: 'West Side of thePanel',
                       collapsible: true,
                       split: true,
                       width: 300,
                       layout : 'accordion',
                       bodyStyle: 'padding:15px',
                       items: [{
                           xtype : 'panel',
                           title: 'Panel 1',
                           html: 'Panel 1 html content'
                       }, {
                           title: 'Panel 2',
                           html: 'Panel 2 html content'
                       }, {
                           title: 'Panel 3',
                           html: 'Panel 3 html content'
                       }]
                      
                   }, {
                       title: 'south Panel',
                       region: 'south',
                       html: 'South Side of the Panel',
                       collapsible: true,
                       split: true,
                       bodyStyle: 'padding:15px'
 
                   }, {
                       title: 'East Panel',
                       region: 'east',
                       html: 'East Side of the Panel',
                       collapsible: true,
                       split: true,
                       bodyStyle: 'padding:15px'
 
                   }]
               });
           });
           Ext.onReady(function () {
               var SamplePanel =Ext.extend(Ext.Panel, {
                   width: 1365,
                   height: 60,
                   hidden: false,
                   renderTo: 'div1',
                   scrollable: true
               })
 
              
               new SamplePanel({
                   title: 'Implementation Testing',
 
                   tbar: [{
                       iconCls: 'add16',
                       text: 'Test1',
                       menu: [
                               {
                                   
                                   text: "Register",
                                   closable: false,
                                   listeners: {
                                       click: function () { Registwin.show();
                                       }
                                   }
                               },
                                   {
                                     
                                       text: "login", closable: false,
                                       listeners: {
                                           click: function () {
                                               loginwin.show();
                                           }
                                       }
                                   }
                               ]
 
                   },
                    {
                        iconCls: 'add16',
                        text: 'Test2',
                        menu: [
                              {
                                 
                                  text: "Register",
                                  closable: false,
                                  listeners: {
                                      click: function () {
                                          Registwin.show();
                                      }
                                  }
                              },
                                  {
                                     
                                      text: "login",
                                      closable:false,
                                     listeners: {
                                         click: function () {
                                              loginwin.show();
                                          }
                                      }
                                  }
                        ]
 
                    },
                      {
                          iconCls: 'add16',
                          text: 'Test3',
                          menu: [
                              {
                                 
                                  text: "Register",
                                  closable: false,
                                  listeners: {
                                      click: function () {
                                         Registwin.show();
                                      }
                                  }
                              },
                                  {
                                     
                                     text: "login",
                                     closable:false,
                                     listeners: {
                                     click: function () {
                                     loginwin.show();
                                          }
                                      }
                                  }
                          ]
                      },
                       {
                           iconCls: 'add16',
                           text: 'Test4',
                           menu: [
                              {
                                
                                 text: "Register",
                                 closable: false,
                                 listeners: {
                                 click: function () {
                                 Registwin.show();
                                      }
                                  }
                              },
                                  {
                                     
                                      text: "login",
                                      closable: false,
                                      listeners: {
                                      click: function () {
                                      loginwin.show();
                                          }
                                      }
                                  }
                           ]
                       },
                        {
                            iconCls: 'add16',
                            text: 'Test5',
                            menu: [
                              {
                                 
                                  text: "Register",
                                  closable: false,
                                  listeners: {
                                      click: function () {
                                          Registwin.show();
                                      }
                                  }
                              },
                                  {
                                   
                                      text: "login",
                                      closable:false,
                                     listeners: {
                                         click: function () {
                        loginwin.show();
                                          }
                                      }
                                  }
                            ]
                        },
                        {
                                iconCls: 'add16',
                                text: 'Test6',
                                menu: [
                                  {
                                    
                                      text: "Register",
                                      closable: true,
                                      listeners: {
                                         click: function () {
                                              Registwin.show();
                                          }
                                      }
                                  },
                                      {
                                          
                                          text: 'login',
                                          closable: false,
                                          listeners: {
 click: function () {
                                           loginwin.show();
                                              }
                                          }
                                      }
                                ]
                        }
    ,
                        {
                            xtype: 'button',
                            text: 'Register',
                            listeners: {
                                click: function () {
                                  Registwin.show();
                                }
                             }
                            
                        }, {
                            xtype: 'button',
                            text: 'Login',
                            listeners: {
                               
                                click: function () {
                                   
                                    loginwin.show();
                                }
                            }
                        }
                   ],
                   lbar: [
                   ],
                   rbar: [
                   ],
                   bbar: [
 
                   ]
               })
               
 
           });
 
           Ext.onReady(function () {
               loginwin = new Ext.Window({
                  id: 'newForm',
                  modal: true,
                  closeAction: 'close',
                  layout: 'fit',
                  height: 200,
                  width: 400,
                  title: 'UserForm',
                  items: [
                      {
                          xtype: 'form',
                          bodyPadding: 5,
                          items:    
                              [
 
                                  {
                                  xtype: 'fieldset',
                                  title: 'Login Page',
                                  defaults:
                                      {
                                      xtype: 'textfield',
                                      labelWidth: 100,
                                      width:300
                                      },
                                  items:
                                      [
                                      {
 fieldLabel: 'Email',
                                          name:'Email',
                                         labelSeparator: '',
                                         maxLength: 10,
                                         enforceMaxLength: true,
                                         allowBlank: false,
                                         msgTarget: 'under'
                                      },
                                      {
                                          fieldLabel:'Password',
                                          name:'Password',
                                         maxLength: 10,
                                         enforceMaxLength: true,
                                         labelSeparator: '',
                                         allowBlank: false, inputType :'password',
                                         msgTarget: 'under'
                                      }
                                  ]
                              }
                          ],
                          buttons: [
                              {
                                  text: 'Save',
                                  action: 'saveUser',
                                  listeners: {
                                      click: function (button) {   
                                         var form = button.up('form');
                                          if (form.isValid()) {Ext.Msg.alert('Succcess', 'Welcome!')}
                                          else
                                         {   Ext.Msg.alert('Error', 'Please fillvailid data !')}
                        
                                      }
                                  }
                              }
                          ] 
                      }
                  ]
               });
 
 
               Ext.onReady(function () {
                   Registwin = new Ext.Window({
                       xtype: 'UserForm',
                       modal: true,
                       closeAction: 'close',
                       layout: 'fit',
                       height: 300,
                       width: 400,
                       title: 'Register',
                       items: [
                           {
                               xtype: 'form',
                               bodyPadding: 5,
                               items: [
                                   {
                                       xtype: 'fieldset',
                                       title: 'Fill The Details',
 
                                       defaults: {
                                          xtype: 'textfield',
                                          labelWidth: 100,
                                          maxLength: 10,
                                          enforceMaxLength: true,
                                          width: 300
 
                                       },
                                       items: [
                                           {
                                              name: 'UserId',
                                              hidden: true
                                           },
                                           {
                                              labelSeparator: '',
                                               fieldLabel: 'Name',
                                              name: 'Name',
                                              maxLength: 10,
                                              enforceMaxLength: true,
                                               allowBlank: false,
                                              msgTarget: 'under'
 
                                           },
                                           {
                                              fieldLabel: 'Email',
                                              labelSeparator: '',
                                              name: 'UserEmail',
                                              maxLength: 20,
                                              vtype :'email',  
                                              enforceMaxLength: true,
                                              allowBlank: false,
                                              msgTarget: 'under'
                                           },
                                           {
                                              fieldLabel: 'Phone',
                                              sortable: false,
                                              name: 'PhoneNumber',
                                              labelSeparator: '',
                                              maskRe: /[0-9]/,
                                              maxLength: 10,
                                               enforceMaxLength: true,
                                              maxLength: 10,
                                              enforceMaxLength: true,
                                              allowBlank: false,
                                               msgTarget: 'under'
 
                                           },
                                           {
                                              labelSeparator: '',
                                              fieldLabel: 'Address',
                                              name: 'Address',
                                              maxLength: 10,
                                              enforceMaxLength: true,
                                              allowBlank: false,
                                              msgTarget: 'under'
                                          },   
                                           {
                                              xtype: 'datefield',
                                              fieldLabel: 'Date of birth',
                                              name: 'DOB',
                                              labelSeparator:'',
                                              format: 'd/m/Y',                                               maxLength: 10,
                                              enforceMaxLength: true,
                                               allowBlank:false,
                                              msgTarget: 'under'
                                           },
                                           {
                                               fieldLabel: 'Password',
                                              name: 'Password',
                                              id: 'pass1',
                                              labelSeparator: '',
                                               inputType: 'password', 
                                              maxLength: 10,
                                              enforceMaxLength: true,
                                               allowBlank:false,
                                              msgTarget: 'Under'
                                           }
                                          
                                       ]
                                   }
                               ],
                               buttons: [
                                   {
                                       text: 'Save',
                                       action: 'saveUser',
                                      listeners: {
                                          click: function (button) {
                                               var form = button.up('form');
                                               if (form.isValid()) {
                                                  Ext.Msg.alert('Succcess','Thanks For Register !')
                                              }
                                               else
                                              {
                                                  Ext.Msg.alert('Error','Please fill vailid data !')
                                               } 
                                           }
                                       }
                                   }
                               ]
                           }    
                       ]
                   });
               });
           })
 
       </script>
    </head>
    <body>
        <divid="div1"></div>
        <divid="div2"></div>
       
    </body>
    </html>


Basic Code to use Sencha ExtJs.

sencha extjsweb development html sencha 
Updated 07-Sep-2019
Abhishek Srivasatava

Abhishek Srivasatava

Follow

Leave Comment

MindStick Training

Comments

Liked By